<template>
  <q-dialog v-model="recordDetailVisible">
    <q-card style="width: 900px; max-width: 80vw">
      <div class="row justify-between items-center">
        <q-card-section>
          <div class="text-h6">
            {{ formTypeName }} {{ $t("Menu") }}:
            {{ recordDetail.value.title }}
          </div>
        </q-card-section>
      </div>

      <q-separator />

      <q-card-section>
        <q-form ref="recordDetailForm">
          <div class="row">
            <q-input class="col" :label="$t('Icon')" v-model="recordDetail.value.icon" clearable>
              <template v-slot:before>
                <q-icon :name="recordDetail.value.icon" size="35px" class="q-mr-sm" />
              </template>
              <template v-slot:prepend>
                <q-icon name="insert_emoticon" class="cursor-pointer">
                  <q-popup-proxy v-model="iconData.showIconPicker">
                    <q-input v-model="iconData.filter" label="Filter" outlined clearable dense class="q-ma-md" />
                    <q-icon-picker icon-set="material-icons" v-model="recordDetail.value.icon" :filter="iconData.filter"
                      v-model:model-pagination="iconData.pagination" tooltips style="
                        height: 300px;
                        width: 300px;
                        background-color: white;
                      " />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
            <q-input class="col" v-model.number="recordDetail.value.sort" type="number"
              :rules="[(val) => val >= 1 || $t('SortRule')]" :label="$t('Sort')" />
          </div>
          <div class="row">
            <q-input class="col" v-model="recordDetail.value.title" :label="$t('Menu') + $t('Name')"
              :rules="[(val) => (val && val.length > 0) || $t('NeetInput')]" />
            <q-input class="col" v-model="recordDetail.value.menu_code" :label="$t('Menu') + $t('Code')"
              :rules="[(val) => (val && val.length > 0) || $t('NeetInput')]" />
            <q-input class="col" v-model="recordDetail.value.parent_code" :label="$t('Parent') + $t('Code')" />
          </div>
          <div class="row">
            <q-field class="col" :label="$t('Page') + $t('Type')" stack-label>
              <template v-slot:control>
                <q-option-group v-model="recordDetail.value.page_type" :options="dictOptions.pageType" color="primary"
                  inline>
                </q-option-group>
              </template>
            </q-field>
            <q-field class="col" :label="$t('Hidden')" stack-label>
              <template v-slot:control>
                <q-option-group v-model="recordDetail.value.hidden" :options="dictOptions.statusYesNo" color="primary"
                  inline>
                </q-option-group>
              </template>
            </q-field>
            <!-- <q-field class="col" :label="$t('Status')" stack-label>
                            <template v-slot:control>
                                <q-option-group v-model="recordDetail.value.status" :options="dictOptions.statusOnOff"
                                    color="primary" inline>
                                </q-option-group>
                            </template>
                        </q-field> -->
          </div>
          <div class="row">
            <q-input class="col" v-model="recordDetail.value.path" :label="$t('Path')"
              :disable="!(recordDetail.value.page_type === 'component')" />
            <q-input class="col" v-model="recordDetail.value.component" :label="$t('Component')"
              :disable="!(recordDetail.value.page_type === 'component')" />
            <q-select class="col" emit-value map-options v-model="recordDetail.value.sql_code" :label="t('Sql')"
              :disable="!(recordDetail.value.page_type === 'sql')" :options="filteredSqlOptions"
              @filter="filterSqlOptions" use-input input-debounce="0">
              <template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    没有找到匹配的选项
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
          </div>
          <q-input type="textarea" v-model="recordDetail.value.redirect" :label="t('Redirect')"
            :disable="!(recordDetail.value.page_type === 'redirect')" />
          <!-- 这界面只改了这一段，其他都是保存时自动格式化了 -->
          <q-editor v-model="recordDetail.value.document" :label="t('Document')"
            :disable="!(recordDetail.value.page_type === 'document')" />
          <!-- <q-input type="textarea" v-model="recordDetail.value.document" :label="t('Document')"
            :disable="!(recordDetail.value.page_type === 'document')" /> -->
          <q-input v-model="recordDetail.value.memo" autogrow filled :label="$t('Memo')" />
        </q-form>
      </q-card-section>

      <q-separator />

      <q-card-actions align="right">
        <q-btn :label="$t('Save')" color="primary" @click="handleAddOrEdit" />
        <q-btn :label="$t('Cancel')" color="negative" v-close-popup />
      </q-card-actions>

      <q-inner-loading :showing="loading">
        <q-spinner-gears size="50px" color="primary" />
      </q-inner-loading>
    </q-card>
  </q-dialog>
</template>

<script setup>
import useRecordDetail from "src/composables/useRecordDetail";
import { postAction } from "src/utils/requestAction";
import { useStorageStore } from "src/stores/storage";
import { ref, computed, watch, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";

const $q = useQuasar();
const { t } = useI18n();
const emit = defineEmits(["handleFinish"]);
const url = {
  list: "menu/get-menu-list",
  add: "menu/add-menu",
  edit: "menu/edit-menu",
  queryById: "menu/query-menu-by-id",
};

const defaults = {
  page_type: "directory",
  hidden: "no",
  sort: 1,
};

const {
  dictOptions,
  showDateTime,
  formType,
  formTypeName,
  recordDetail,
  recordDetailVisible,
  loading,
  show,
  recordDetailForm,
  handleAddOrEdit,
} = useRecordDetail(url, emit, defaults);

defineExpose({
  show,
  formType,
  recordDetail,
});

const iconData = ref({
  filter: "",
  showIconPicker: false,
  pagination: {
    itemsPerPage: 35,
    page: 0,
  },
});

const sqlOptions = ref([]);
const filteredSqlOptions = ref([]);
const getSqlOptionList = async () => {
  const res = await postAction("sql/get-sql-list", {});
  if (res.code === 1) {
    sqlOptions.value = res.data.records.map((item) => item.sql_code);
    filteredSqlOptions.value = res.data.records.map((item) => item.sql_code);
    console.log(filteredSqlOptions.value);
  } else {
    $q.notify({
      type: "warning",
      message: t("Loading") + t("Sql") + t("Error"),
    });
  }
};

const filterSqlOptions = (val, update) => {
  if (val === "") {
    update(() => {
      filteredSqlOptions.value = sqlOptions.value;

      // here you have access to "ref" which
      // is the Vue reference of the QSelect
    });
    return;
  }

  update(() => {
    const needle = val.toLowerCase();
    filteredSqlOptions.value = sqlOptions.value.filter(
      (v) => v.toLowerCase().indexOf(needle) > -1
    );
  });
};

onMounted(() => {
  getSqlOptionList();
  console.log("sqlOptions", sqlOptions.value);
});

watch(recordDetail, () => {
  iconData.value.showIconPicker = false;
});
</script>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "MenuRecordDetail",
});
</script>
